﻿<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>index</title>
{#    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>#}
{#    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>#}
{#    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>#}
    <script type="text/javascript" src="../../static/home/dist/js/jquery.js"></script>
<link type="text/javascript" src="../../static/home/dist/css/style.css"></link>

<script type="text/javascript" src=" ../../static/home/dist/js/echarts.min.js"></script>
<script type="text/javascript" src="../../static/home/dist/js/china.js"></script>
<script type="text/javascript" src="../../static/home/dist/js/map.js"></script>
		
<script type="text/javascript" src="../../static/home/dist/js/js.js"></script>
<link rel="stylesheet" href="../../static/home/dist/css/style.css">

</head>

<body>
	<div class="head clearfix">
	<h1  style="text-align: center" class="title">上海共享车可视化大屏</h1>
		<div class="time" id="showTime">2018/6/12 17:00:12</div>

	</div>
	<div class="mainbox">
	
	<ul class="clearfix nav1">
		<li style="width: 22%">
		<div class="box">
			<div class="tit">各个地区用户数量</div>
			<div class="boxnav" style="height: 330px;">
            <div class="yqlist">
             <ul class="clearfix">
                              <li>
                <div class="yq" id="yq">2634</div>
                <span>销售总数(1)</span></li>
                              <li>
                <div class="yq">567</div>
                <span>数据展示(2)</span></li>
                              <li>
                <div class="yq">56345</div>
                <span>数据展示(3)</span></li>
                              <li>
                <div class="yq">721</div>
                <span>数据展示(4)</span></li>
             </ul>
			 <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
			 <script>
                  function fetchData() {
                 axios.get('http://127.0.0.1:5000/data_1')
               .then(function(response) {
				var data = response.data; // 假设接口返回的数据是一个对象
				// var data = JSON.parse(data);
				// console.log(data)
    // 替换 <div> 标签内容
    var divElements = document.getElementsByClassName('yq');
    for (var i = 0; i < divElements.length; i++) {
		var key = Object.keys(data)[i];
		// console.log(Object.keys(data)[i])
		// console.log(11111111)
		// console.log(typeof(data))
		// console.log(data[key])

  
      divElements[i].textContent = data[key];
    }

    // 替换 <span> 标签内容
    var spanElements = document.getElementsByTagName('span');
    for (var j = 0; j < spanElements.length; j++) {
      var key = Object.keys(data)[j];
      spanElements[j].textContent = key ;
	//   console.log(key)
    }
  })
              .catch(function(error) {
              console.log('请求失败', error);
               });
               }
               // 调用fetchData函数来获取数据并填充到HTML结构中
              fetchData();
			</script>
           </div>
			</div>
			</div>
			<div class="box">
			<div class="tit">各个时段流量比较</div>
			<div class="boxnav" style="height: ;">
				<div class="" style="height: 406px" id="echart2"></div>
			</div>
			</div>
		</li>
		<li style="width: 56%">
		
		<div class="box">
			<div class="boxnav mapc" style="height: 550px; position: relative">
			<div class="map" id="map"></div>
			</div>
			</div>
		<div class="box">
			<div class="tit">每周骑行数量分析</div>
			<div class="boxnav" style="height: 250px;"  id="echart3">
				
				
			</div>
			</div>
		</li>
		<li style="width: 22%">
		<div class="box">
			<div class="tit">周末与非周末时段对比</div>
			<div class="boxnav" id="echart4" style="height: 200px;">
			
			</div>
			</div>
			<div class="box">
			<div class="tit">各个区共享单车数量</div>
			<div class="boxnav" style="height: 250px;" id="echart5" >
			</div>
			</div>
		<div class="box">
			<div class="tit">骑行距离分布</div>
			<div class="boxnav" style="height: 250px;" id="echart6">
			
			
			
			</div>
			</div>
		</li>
		</ul>
		

		<script>
var t = null;
    t = setTimeout(time,1000);//開始运行
    function time()
    {
       clearTimeout(t);//清除定时器
       dt = new Date();
		var y=dt.getFullYear();
		var mt=dt.getMonth()+1;
		var day=dt.getDate();
       var h=dt.getHours();//获取时
       var m=dt.getMinutes();//获取分
       var s=dt.getSeconds();//获取秒
       document.getElementById("showTime").innerHTML = y+"/"+mt+"/"+day+" "+h+":"+m+":"+s+"";
       t = setTimeout(time,1000); //设定定时器，循环运行     
    } 

</script>
	</div>
</body>
</html>
